<!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm-extend.min.css">
  <script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/common/common/common.js"></script>
  <style>
    li{
      list-style: none;
    }
    a{
      text-decoration: none;
    }
    /*修改标题栏颜色*/
    .bar.bar-nav {
      background-color: #1FCA23;
    }

    /*修改标题栏字体颜色*/
    .bar.bar-nav .title {
      color: #fff;
    }
    
    /*修改工具栏背景颜色*/
    .bar.bar-tab {
      background-color: #FEEA4D;
    }
    #pull-left{
      display:inline-block;
      width: 1.5rem;
      padding-top:0.3rem;
      float: left;
    }
    #pull-left img{
      display: block;
      width: 100%;
    }
    #pull-title{
      display: inline-block;
      width: 8.0rem;
      height: 2.2rem;
      line-height: 2.2rem;
      /* float: left; */
      margin-left: 30%;
      color: #fff;
      font-size: 16px;
      margin-left: calc(50% - 4rem - 1.5rem);
      text-align: center;
    }
    /*修改内容区背景色*/
    body{
      background-color:#eeeeee;
      margin: 0;
    }
    .menu{
      width: 100%;
      height:2.8rem;
      background-color:#fff;
      border-bottom: 1px solid #ededee;
      font-size: 14px;
      position: absolute;
      float: left;
      z-index: 600;
      top:2.27rem;
      left: 0;
    }
    .menu_learn{
      width: 100%;
      height: 2.8rem;
      line-height: 2.8rem;
      float: left;
      /*margin-left:9%;*/
      text-align:center;
    }
    .con_list{
      width: 100%;
      height: auto;
      background-color: #fff;
      float: left;
      margin-bottom:0.5rem;
      padding: 0.2rem 0.8rem;
      z-index: 200;
    }
    .items_title{
      width: 100%;
      border-bottom:1px solid #ededee;
      padding: 0.4rem 0.1rem;
    }
    .items_title2{
      width: 100%;
      padding: 0.4rem 0.1rem;
    }
    .items_title h5{
      margin:0;
    }
    .items_title span{
      font-size: 14px;
      color: #1FCA23;
    }
    .items_title span:last-child{
      margin-left:1.0rem;
    }
    .con_list ul{
      margin:0;
      padding: 0.4rem 0.1rem;
    }
    .con_list ul li {
      font-size: 14px;
      color:gray;
      height:1.6rem;
      line-height: 1.6rem;
    }
    .con_list ul li a{
      font-size: 14px;
      color:gray;
    }
    .con_list ul li span:first-child{
      display: inline-block;
      width:45%;
    }
    .con_list ul li span:last-child{
      display: inline-block;
      width: 15%;
      text-align: right;
    }
    .con_list ul .allword,.allword2,.allword3{
      display: none;
    }


     /*点击学习类型显示的下拉页面*/
   #learnshow{
     width: 100%;
     height: auto;
     background-color:#fff;
     position: absolute;
     left: 0;
     top:5rem;
     z-index: 600;
     display: none;
     border-top: 1px solid #ededee;
   }
   #learnshow>ul{
    width: 80%;
    height: 100%;
    margin:0 auto;
    padding:0;
    padding-bottom: 0.4rem;
    /* border:1px solid lightgray; */
    text-align: center;
   }
   #learnshow>ul li{
    width: 100%;
    height: 2.0rem;
    line-height:2.0rem;
    border-bottom: solid 1px #ededee;
   }
   #learnshow>ul li a{
    color:black;
    font-size: 14px;
    text-align: center;
   }
    /*遮罩层效果*/
    #shade{
    width:100%;
    background:rgba(0,0,0,0.3);
    z-index: 100;
    position: absolute;
    bottom: 0;
    
    display: none;
  }
  </style>
</head>
<body>
  
  <div class="page-group">
    <div class="page">
       <!-- 标题栏 -->
      <header class="bar bar-nav">
         <a href="#" id="pull-left" onclick="backclick()"><img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/back@2x.png"></a>
         <span id="pull-title">学习详情</span>
      </header>

      <div class="menu">
            <div class="menu_learn">
              <span onclick="learnshow()" id="learn">学习类型</span>
              <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png">
            </div>
      </div>

      <div id="learnshow">
         <ul>
           <li><a href="#">全部</a></li>
           <li><a href="#">播放学习</a></li>
           <li><a href="#">跟读学习</a></li>
         </ul>
       </div>

       <!--遮罩效果 -->
        <div id="shade" onclick="bodyclick()">
        
        </div>
      <!-- 工具栏 -->
      <!-- nav class="bar bar-tab">
        <a class="tab-item external" href="#">
          <span class="icon icon-home"></span>
          <span class="tab-label">书 架</span>
        </a>
        <a class="tab-item external active" href="#">
          <span class="icon icon-me"></span>
          <span class="tab-label">我 的</span>
        </a>
      </nav> -->

      <!-- 页面内容区域 -->

         <!-- <div class="con_list"> -->
            <!-- <div class="items_title"> -->
               <!-- <h5>let's go on an outing tomorrow weekend</h5>
               <span>小学英语六年级第一课</span>
               <span>评测得分：&nbsp;90分</span> -->
            <!-- </div> -->
            
         <!-- </div> -->
        <!--  <div class="con_list">
            <div class="items_title">
               <h5>let's go on an outing tomorrow weekend</h5>
               <span>小学英语六年级第一课</span>
               <span>评测得分：&nbsp;90分</span>
            </div>
            <ul>
               <li><a href="#">详情</a></li>
               <li><span>let's</span>  <span>90分</span></li>
               <li><span>go</span>  <span>98分</span></li>
               <li><span>on</span>  <span>100分</span></li>
               <li><a href="#" class="seeall2">查看全部</a> <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png"></li>
               <li class="allword2">one two three four five six ...</li>
            </ul>
         </div> -->
         

      <!-- 主题内容部分 -->
      <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100" style="position: absolute; top:2.67rem">
          <div class="list-block" id="li_block">
              <ul class="list-container" >
              </ul>
          </div>
          <!-- 加载提示符 -->
          <div class="infinite-scroll-preloader">
              <div class="preloader"></div>
          </div>
      </div>
    </div>
  </div>

  <!-- !-- 固定的js引用，所有的jQuery 要用 $$ 表示 --> 
<script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/zepto/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/sm.min.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='https://gitee.com/huaflower/CommonFile/raw/master/js/sm-extend.min.js' charset='utf-8'></script> -->
<script src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/swiper/swiper.min.js"></script>
<script type="text/javascript">

    // 加载flag
    var loading = false;
    var offset = 0;
    var limit = 12;
    var lastlength = 12;
    var datalist = new Array();
    var curtest_id = "";
    var curlearntype = -1;//当前的学习类型，-1 不区分学习类型，0：跟读学习，其他播放学习
var isdeletebottom = false;
var isplay = false;
    // 注册'infinite'事件处理函数
      $(document).on('infinite', '.infinite-scroll-bottom',function() {


          // 如果正在加载，则退出
          if (loading) return;

          // 设置flag
          loading = true;

          // 模拟1s的加载过程
          setTimeout(function() {
              // 重置加载flag
              loading = false;
              console.log('================'+lastlength + '====' + limit);


              if (lastlength < limit) {
                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));
                  isdeletebottom = true;
                  // 删除加载提示符
                  // $('.infinite-scroll-preloader').remove();
                  return;
              }
               offset = datalist.length;
               getData(curtest_id,curlearntype);
              // 添加新条目
              // addItems(itemsPerLoad, lastIndex);
              // 更新最后加载的序号
              //容器发生改变,如果是js滚动，需要刷新滚动
              $.refreshScroller();
          }, 1000);
      });

   // 点击返回
   function backclick(){
     native_goto('local/finish');
   }
 
   // 遍历数据
   function getData(cid,learntype){ 

      var param = {}
      isplay = false;
      if(learntype == -1){//所有（不区分学习类型）
          net_request('get','api/v1/learn_test_sentences?search=test_id:'+cid+'&offset='+offset+'&limit='+limit,param,successCallBack,errorCallBack);
      }else{////0：跟读测试，其他都是播放记录
        ///http://101.201.237.108/api/v1/learn_test_sentences?searchFields=detail:like;test_id:=&search=test_id:27;detail:Sure.&searchJoin=and&limit=20&offset=0
        if(learntype == 0){//跟读
          net_request('get','api/v1/learn_test_sentences?searchFields=detail:like;test_id:=&search=test_id:'+cid+';detail:{;detail:}&searchJoin=and&offset='+offset+'&limit='+limit,param,successCallBack,errorCallBack);
        }else{//播放，需要手动筛选一下
          // net_request('get','api/v1/learn_test_sentences?searchFields=detail:ilike;test_id:=&search=test_id:'+cid+';detail:{;detail:}&searchJoin=and&offset='+offset+'&limit='+limit,param,successCallBack,errorCallBack);

          isplay = true;
          net_request('get','api/v1/learn_test_sentences?search=test_id:'+cid+';point:0&searchJoin=and&offset='+offset+'&limit='+limit,param,successCallBack,errorCallBack);
        }
      }
      
   }



   // 成功函数回调
   function successCallBack(data){
     if (isNotNull(data) && data.success) {
         var databody = data.data;
         if (offset == 0) {
            datalist = new Array();
         }
         var html = '';
         if (isNotNull(databody)) {
            var list = databody.list;
            if (isNotNull(list)) {
               
               lastlength = list.length;

                for (var i = 0; i < list.length; i++) {

                      var item = list[i];
                      datalist.push(item);
                }

                


                 for (var i = 0; i < datalist.length; i++) {
                    var item = datalist[i];
                    if (isNotNull(item)) {
                      var point = item.point;
                      var name = "";//名称
                      var title = "";//title
                      if(isNotNull(item.test) && isNotNull(item.test.book)){
                        name = item.test.book.name +' '+ item.test.section;
                      }
                      



                        var strde = "";
                        if(isNotNull(item.detail)){
                          strde = item.detail;
                        }

                        if(strde.indexOf("{") == 0 && endWith(strde,"}")){//这是json格式，走json方案



                            var resultdel = JSON.parse(item.detail);

                            if(isNotNull(resultdel)){
                              title = resultdel.chapter_content;//
                              html += '<div class="con_list"><div class="items_title"><h5>'+title+'</h5><span>'+name+'</span><span>评测得分：'+point+'</span></div><ul><li><a href="#">详情</a></li>';
                              var words = resultdel.words;
                              if(isNotNull(words)){
                                for(var ii = 0;ii<words.length;ii++){
                                  var wwd = words[ii];
                                  // alert(JSON.stringify(wwd));
                                  if(isNotNull(wwd)){
                                      var wwcontent = wwd.content;
                                      if(wwcontent == "sil"){
                                        continue;
                                      }
                                      // alert(wwd.score);
                                      var wwscore = 0;
                                      // if(isNotNull(wwd.score)){
                                        

                                        wwscore = parseInt(wwd.score);
                                        // alert(wwscore);
                                      // }
                                      
                                      if(ii<3){
                                        // if(isNotNull(wwscore)){
                                          html += '<li><span>'+wwcontent+'</span><span>'+wwscore+'分</span></li>';
                                        // }
                                        
                                      }else if(ii == 3){
                                        html += '<li><a href="#" onclick="seeall(this)" class="seeall2">查看全部</a><img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png"></li>';
                                        // if(isNotNull(wwscore)){
                                          html += '<li class="allword2"><span>'+wwcontent+'</span><span>'+wwscore+'分</span></li>';
                                        // }
                                      }else{
                                        // if(isNotNull(wwscore)){
                                          html += '<li class="allword2"><span>'+wwcontent+'</span><span>'+wwscore+'分</span></li>';
                                        // }
                                      }



                                      

                                  }
                                }

                                
                              }
                              html += '</ul></div>';

                            }

                        }else{


                          html += '<div class="con_list"><div class="items_title2"><h5>'+strde+'</h5><span>'+name+'</span><span></span></div></div>';


                        }
                      
                      

                    }           
                 }   
                       
            }

            if(datalist.length == 0){
              html= "";       
           }
            
             $$('.list-container').html(html); 
             
             if (lastlength < limit || datalist.length == 0) {
                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));
                  // 删除加载提示符
                  $('.infinite-scroll-preloader').remove();
                  isdeletebottom = true;
            }
         }
     }
   }


   function seeall(cthis){
    if ($$(cthis).html()=='查看全部') {
        $$(cthis).html('点击收起');
        $$(cthis).parent().siblings(".allword2").show();
        $$(cthis).next().attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigonup.png');
      }else{
        $$(cthis).html('查看全部');
        $$(cthis).parent().siblings(".allword2").hide();
        $$(cthis).next().attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png');
      }
   }


   // 失败函数回调
   function errorCallBack(data){
       console.log(JSON.stringify(data));
   }

  function getParams(data){
   // data需要转成json调用 ，函数urlParamParseJson();
     var jodata = urlParamParseJson(data);
     if(isNotNull(jodata) && isNotNull(jodata.cid)){//
        curtest_id = jodata.cid;
        curlearntype = -1;

        if(isdeletebottom){
            isdeletebottom = false;
            $$("#main").append('<div class="infinite-scroll-preloader" id="placeholder"><div class="preloader"></div></div>');

            $.attachInfiniteScroll($('.infinite-scroll'))
          }
        getData(jodata.cid,curlearntype);

     }


}



// 点击学习类型显示的下拉页面
  function learnshow(){

    // 点击出现遮罩效果
    var docheight = $$('.infinite-scroll-bottom').height(); 
    $$('#shade').show();
    $$("#shade").css({ "height": docheight });

    if ($$('#learnshow').is(':hidden')) {
        $$('.menu_learn').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigonup.png');
        $$('#learnshow').show();
    }else{
        $$('.menu_learn').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png');
        $$('#learnshow').hide();
        $$('#shade').hide();
    }

    // 点击learnshow下面的a标签隐藏下拉框
    $$('#learnshow ul li').click(function(){
        $$('#learnshow').hide();
        $$('#shade').hide();
        // 获取当前值赋值
        var text = $$(this).text();
        $$('#learn').text(text);

        // 获取当前索引值
        var csindex = $$(this).index();

        // 上下图标的指向相应更改
        if ($$('#learnshow').is(':hidden')) {
            $$('.menu_learn').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigondown.png');
        }else{
            $$('.menu_learn').find('img').attr('src','https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/trigonup.png');
        }


      if(isdeletebottom){
          isdeletebottom = false;
          $$("#main").append('<div class="infinite-scroll-preloader" id="placeholder"><div class="preloader"></div></div>');

          $.attachInfiniteScroll($('.infinite-scroll'))
        }

         offset = 0;
         if(csindex == 0){
            curlearntype = -1;
         }else if(csindex == 1){
            curlearntype = 1;
         }else{
            curlearntype = 0;
         }

        $$('.list-container').html(" "); 
        getData(curtest_id,curlearntype);
    });

  }


 
  // 点击遮罩层隐藏div
  function bodyclick(){
     $$('#childshow').hide();
     $$('#subshow').hide();
     $$('#learnshow').hide();
     $$('#shade').hide();
  }


    // 初始化
    $(function(){

      $.init();
      
    });
  </script>
</body>
</html>